/* 响应式设计样式 */

/* 基础响应式设计变量 */
:root {
  --container-padding-mobile: 1rem;
  --container-padding-tablet: 1.5rem;
  --container-padding-desktop: 2rem;
  --header-height-mobile: 4rem;
  --header-height-desktop: 4rem;
  --border-radius-mobile: 0.5rem;
}

/* 移动优先的媒体查询断点 */
/* 小屏幕设备 (手机, 600px 及以下) */
@media only screen and (max-width: 600px) {
  /* 调整容器内边距 */
  .max-w-7xl {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
  }
  
  /* 调整标题大小 */
  h1.text-3xl {
    font-size: 1.5rem;
  }
  
  h2.text-2xl {
    font-size: 1.25rem;
  }
  
  /* 调整按钮组在移动端的布局 */
  .space-x-3 {
    gap: 0.5rem;
  }
  
  /* 调整表单元素在移动端的大小 */
  .p-6 {
    padding: 1rem;
  }
  
  /* 调整表单和卡片在移动端的布局 */
  .card, .form-container {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--border-radius-mobile);
  }
  
  /* 调整输入框在移动端的大小 */
  input, select, textarea, .UInput, .USelect, .UTextarea {
    font-size: 16px; /* 防止iOS自动缩放 */
    width: 100%;
  }
  
  /* 调整按钮组在移动端的布局为垂直排列 */
  .flex.space-x-4 {
    gap: 0.75rem;
  }
  
  /* 调整反馈列表在移动端的布局 */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 > div {
    margin-bottom: 1rem;
  }
  
  /* 调整模态框在移动端的宽度 */
  .sm\:max-w-lg {
    max-width: 90%;
  }
  
  /* 调整导航栏在移动端的布局 */
  nav .flex.justify-between {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
  
  /* 移动端导航菜单按钮 */
  .mobile-menu-button {
    display: block;
  }
  
  /* 移动端导航菜单 */
  .mobile-menu {
    position: fixed;
    top: var(--header-height-mobile);
    left: 0;
    right: 0;
    background-color: white;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 50;
  }
  
  /* 移动端导航项目 */
  .mobile-menu .nav-item {
    display: block;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
  }
  
  /* 移动端导航项目最后一个元素 */
  .mobile-menu .nav-item:last-child {
    border-bottom: none;
  }
  
  /* 调整用户信息区域在移动端的布局 */
  .flex.items-start.space-x-6 {
    flex-direction: column;
    gap: 1rem;
  }
  
  .flex.items-start.space-x-6 > div {
    margin-left: 0 !important;
  }
  
  /* 调整统计数据在移动端的布局 */
  .mt-6.flex.items-center.space-x-12 {
    justify-content: space-around;
    gap: 0.5rem;
  }
  
  /* 调整画板网格在移动端为单列 */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr;
  }
  
  /* 调整按钮在移动端的大小 */
  .UButton {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
}

/* 中等屏幕设备 (平板电脑, 768px 及以上) */
@media only screen and (min-width: 601px) and (max-width: 768px) {
  /* 调整容器内边距 */
  .max-w-7xl {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
  
  /* 调整画板网格在平板上为两列 */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 大屏幕设备 (笔记本电脑/台式机, 992px 及以上) */
@media only screen and (min-width: 769px) and (max-width: 992px) {
  /* 调整容器内边距 */
  .max-w-7xl {
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }
}

/* 额外的工具类 */
.hidden-mobile {
  display: none;
}

@media only screen and (min-width: 601px) {
  .hidden-mobile {
    display: block;
  }
  
  .hidden-desktop {
    display: none;
  }
}

/* 触摸优化 */
@media (hover: none) {
  /* 增大触摸目标大小 */
  button, .UButton, a {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* 优化表单元素在触摸设备上的体验 */
  input, select, textarea {
    font-size: 16px; /* 防止iOS自动缩放 */
  }
  
  /* 优化触摸反馈 */
  .UButton, button, a, .nav-item {
    transition: transform 0.1s, opacity 0.2s;
  }
  
  .UButton:active, button:active, a:active, .nav-item:active {
    transform: scale(0.97);
    opacity: 0.8;
  }
}